<template>
	<div class="bankCardSet">
		<HeaderTop :title="`虚拟币设置`"></HeaderTop>
		<div class="extract-content" v-if="!isChecked">
			<div class="top-reminds">*修改和绑定虚拟币账号必须先验证手机号码，若手机号码有误，请联系我们的工作人员</div>
			<div class="input-area">
				<div class="user-name">
					<img src="../../../static/images/agent-reg-phone.png" alt="" class="user-name-icon">
					<div class="middle-gray-line"></div>
					<input id="userName" type="text" :placeholder="userPhone" ref="accountInput" readonly>
				</div>
				<div class="user-name user-pwd">
					<img src="../../../static/images/agent-login-verification-code.png" alt="" class="user-name-icon">
					<div class="middle-gray-line"></div>
					<input id="verificationCode" type="text" maxlength="11" placeholder="请输入手机验证码" ref="vc_code_input">
					<van-button v-if="!showNum" class="vc-button" color="#0072E5" @click.native="sendMessage" round>{{vcBtnFonts}}</van-button>
					<van-button v-if="showNum" class="vc-button" color="#0072E5" round disabled>{{vcBtnFonts}}</van-button>
				</div>
			</div>
			<van-button class="next-btn" color="#00459E" round block @click="nextStep">下一步</van-button>
		</div>
		<div class="extract-content" v-if="isChecked">
			<div class="my-data-list">
				<div class="my-data-list-left">虚拟币帐号</div>
				<van-field class="my-data-list-right my-data-list-right2" type="text" v-model="virtualCoinAcc"
				           placeholder="请输入虚拟币帐号" input-align="right"/>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">虚拟币类型</div>
				<div class="my-data-list-right" @click="getCurrency()">
					<div class="my-data-list-right-left">{{chosedType}}</div>
					<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
					     class="my-data-list-right-right">
				</div>
			</div>
			<van-button class="sub-withdraw" type="info" color="#00459E" block @click="subSet">确定</van-button>
		</div>
		<!--		币种列表-->
		<van-action-sheet id="dateSwitch" class="date-switch" v-model="virtualCoinTypeShow"
		                  @click-overlay="cancerChosingBank()">
			<div class="date-switch-title">请选择币种</div>
			<div class="date-switch-content">
				<div class="date-switch-content-list" v-for="(item,index) in virtualCoinList" @click="chosingVirtualCoinType(index)">
					<div class="left">{{item.virtualName}}</div>
					<div class="right">
						<div class="blue-point" v-if="isChosingType===index"></div>
					</div>
				</div>
			</div>
			<van-button class="date-switch-sub" color="#00459E" block @click="subChosingBank">确定</van-button>
		</van-action-sheet>
	</div>
</template>
<script>
import HeaderTop from '../../components/top/top';
import {Dialog, Toast} from "vant";

export default {
	name: 'virtualCoinSet',
	components: {
		HeaderTop,
	},
	data() {
		return {
			isChecked:false,
			chosedType: '请选择虚拟币帐号',
			virtualCoinAcc:'',
			virtualCoinList: [],
			isChosingType: 0,
			virtualCoinTypeShow:false,
			showNum:false,
			vcBtnFonts:'获取验证码',
			userPhone:'',
			sysVirtualId:'',
			
		}
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	mounted() {
		this.getUserPhone()
		// console.log(addr)
	},
	methods: {
		getUserPhone(){
			this.ServerAPI.postAPI(this.API.userInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.userPhone = data.data.phone
					}
				}
			})
		},
		getCurrency(){
			this.virtualCoinTypeShow = true
			this.ServerAPI.postAPI(this.API.getCurrency, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.virtualCoinList = data.data
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
		},
		nextStep(){
			let params = {
				type: 'virtual',
				vcode: this.$refs.vc_code_input.value
			}
			this.ServerAPI.postAPI(this.API.virtualSendsmsCfm, params, (success,data)=>{
				if(success){
					if(data.code === '0000'){
						Toast.success('验证通过')
						this.isChecked = true
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
		},
		chosingVirtualCoinType(value) {
			this.isChosingType = value
		},
		cancerChosingBank() {
			this.chosedType = '请选择虚拟币帐号'
		},
		subChosingBank() {
			this.chosedType = this.virtualCoinList[this.isChosingType].virtualName
			this.sysVirtualId = this.virtualCoinList[this.isChosingType].virtualId
			this.virtualCoinTypeShow = false
		},
		sendMessage() {
			this.showNum = true
			this.vcBtnFonts = '发送中'
			let params = {
				type: 'virtual'
			};
			this.ServerAPI.postAPI(this.API.virtualSendsms, params, (success, data) => {
				if (success) {
					if (data.code == "0000") {
						Toast.success('验证码发送成功')
						this.getCode()
					} else {
						Toast({
							message: data.info,
							position: 'middle',
							className: 'remind',
							duration: 2000
						});
						Toast.fail(data.info)
					}
				}
			})
		},
		getCode() {
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.vcBtnFonts = TIME_COUNT;
				this.timer = setInterval(() => {
					if (this.vcBtnFonts > 0 && this.vcBtnFonts <= TIME_COUNT) {
						this.vcBtnFonts--
						this.showNum = true
					} else {
						this.vcBtnFonts = '获取验证码'
						this.showNum = false
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			}
		},
		subSet() {
			let params = {
				virtualCard: this.virtualCoinAcc,
				sysVirtualId: this.sysVirtualId
			}
			this.ServerAPI.postAPI(this.API.subVirtual, params, (success, data) => {
				if (success) {
					if (data.code == "0000") {
						Dialog.alert({
							message: '虚拟币账户绑定成功',
							confirmButtonColor:'#00459E'
						}).then(() => {
							// on close
							this.$router.push('/safeCenter')
						});
					} else {
						Toast.fail(data.info);
					}
				}else{
					Toast.fail(data.info);
				}
			})
		}
		
	}
}
</script>
<style lang="scss" scoped>
.extract-content {
	border-top: rgb(210, 210, 210) 1px solid;
	padding: 0 .2rem;
	.top-reminds {
		color: rgb(254,121,33);
		margin-top: .3rem;
	}
	.input-area {
		width: 90%;
		margin: .5rem auto 0;
		position: relative;
		
		.name-remind {
			position: absolute;
			top: -.4rem;
			font-size: .24rem;
			color: #AAAAAA;
		}
		
		.user-name {
			display: flex;
			align-items: center;
			padding: .2rem .3rem;
			border-radius: .6rem;
			background: rgb(238,238,238);
			
			.user-name-icon {
				width: .4rem;
				margin-left: .2rem;
			}
			.middle-gray-line {
				height: .6rem;
				width: 1px;
				background: rgba(142,142,141,.5);
				margin: 0 .2rem;
			}
			
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
				background: rgb(238,238,238);
			}
			.vc-button {
				position: absolute;
				right: .15rem;
				width: 2rem;
				height: .8rem;
				line-height: .8rem;
				font-size: .26rem;
			}
		}
		.user-pwd {
			margin-top: .4rem;
			display: flex;
			align-items: center;
			padding: .2rem .35rem;
			border-radius: .6rem;
			
			.user-pwd-icon {
				width: .4rem;
				margin-right: .1rem;
			}
			
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
			}
		}
	}
	.next-btn {
		width: 80%;
		margin: .6rem auto 0;
	}
	
	.my-data-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1rem;
		border-bottom: 1px solid #ececec;
		padding: 0 .2rem;
		
		.my-data-list-left {
			color: rgb(46, 46, 46);
			font-size: .28rem;
		}
		
		.my-data-list-right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.my-data-list-right-left {
				flex: .6rem;
				color: #191D2A;
				margin-right: .2rem;
				
				img {
					width: .8rem;
					height: .8rem;
				}
				
				.adress-line1 {
					width: 3.5rem;
					height: 50%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.adress-current {
						width: .6rem;
						height: .35rem;
						text-align: center;
						line-height: .35rem;
						font-size: .24rem;
						color: #FFFFFF;
						background: #D6353F;
						border-radius: .05rem;
					}
				}
			}
			
			.my-data-list-right-right {
				height: .25rem;
			}
		}
		
		.my-data-list-right2 {
			width: 68%;
			padding-right: 0;
		}
		
		.my-data-list-right3 {
			width: 68%;
			text-align: right;
			
			.my-data-list-right-left {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	
	.sub-withdraw {
		width: 80%;
		margin: 1rem auto 0;
		border-radius: .15rem;
	}
}

.date-switch {
	//height: 6rem;
	padding: 0 .25rem .3rem;
	color: rgb(46, 46, 46);
	font-size: .28rem;
	
	.date-switch-title {
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		font-weight: bold;
		border-bottom: rgb(210, 210, 210) 1px solid;
	}
	
	.date-switch-content {
		padding: 0 .3rem;
		max-height: 5rem;
		overflow-y: auto;
		
		.date-switch-content-list {
			height: .8rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.right {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				border: rgb(83, 83, 83) 1px solid;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.blue-point {
					height: 12px;
					width: 12px;
					border-radius: 50%;
					background: rgb(0, 71, 157);
				}
			}
		}
	}
	
	.date-switch-sub {
		width: 80%;
		margin: .3rem auto 0;
	}
}
</style>

